<template>
	<view class="info-list">
		<view class="item" v-for="(item,index) in documentsLS" :key="index">
			<view class="item-l">
				<image :src="item.img" mode="scaleToFill"></image>
				<view class="i-data">
					<view class="i-d-a">{{item.title}}</view>
					<view class="i-d-b">
						{{item.brand}}
						<text>{{item.note}}</text>|
						<text>{{item.Art_number}}</text>
					</view>
					<view class="i-d-c">
						<!-- <view class="i-price">{{item.price}}</view> -->
						<input class="i-price" type="text" :value="item.price">
						<view class="i-ride">&times;</view>
						<view class="i-num">
							<view class="reduce" @click="reduceNum(index)">&#8722;</view>
							<view class="num">{{item.num}}</view>
							<view class="plus" @click="plusNum(index)">&#43;</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item-r" @click="onDocumentInfo">
				<image src="../../static/images/c-more.png" mode="scaleToFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				documentsLS:[
					{
						img:"../../static/temp/222.jpg",
						title:"玻尿酸",
						brand:"欧莱雅(OLAY)",
						note:"脸霜面霜",
						Art_number:"565122",
						price:"120",
						num:5,
					},
					{
						img:"../../static/temp/222.jpg",
						title:"玻尿酸",
						brand:"欧莱雅(OLAY)",
						note:"脸霜面霜",
						Art_number:"565122",
						price:"120",
						num:9,
					},
					{
						img:"../../static/temp/333.jpg",
						title:"玻尿酸",
						brand:"欧莱雅(OLAY)",
						note:"脸霜面霜",
						Art_number:"565122",
						price:"120",
						num:20,
					},
					{
						img:"../../static/temp/111.jpg",
						title:"玻尿酸",
						brand:"欧莱雅(OLAY)",
						note:"脸霜面霜",
						Art_number:"565122",
						price:"120",
						num:15,
					},
					{
						img:"../../static/temp/222.jpg",
						title:"玻尿酸",
						brand:"欧莱雅(OLAY)",
						note:"脸霜面霜",
						Art_number:"565122",
						price:"120",
						num:6,
					}
				],
			};
		},
		created() {
			
		},
		methods:{
			onDocumentInfo()
			{
				console.log("click info more!!!");
				this.$emit("showDocumentInfo",true);
			},
			
			reduceNum(index)
			{
				if(this.documentsLS[index].num == 0) return;
				this.documentsLS[index].num--;
			},
			
			plusNum(index)
			{
				this.documentsLS[index].num++;
			},
		},
	}
</script>
<style lang="scss">
	.info-list
	{
		.item:hover
		{
			background: #F8F8F8;
		}
		.item{
			padding: 20px;
			border-bottom: 1px solid #EEE;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// cursor: pointer;
			.item-l
			{
				display: flex;
				image
				{
					width: 80px;
					height: 80px;
					border-radius: 4px;
				}
				.i-data
				{
					flex: 1;
					padding-left: 10px;
					color: #333333;
					.i-d-a
					{
						font-size: 15px;
					}
					.i-d-b
					{
						color: #999;
						text{
							padding: 0 10px;
						}
					}
					.i-d-c
					{
						padding-top: 6px;
						display: flex;
						align-items: center;
						.i-ride
						{
							padding: 0 10px;
						}
						.i-price
						{
							width: 80px;
							height: 24px;
							line-height: 24px;
							text-align: center;
							font-size: 13px;
							border-radius: 4px;
							border: 1px solid #E6E6E6;
						}
						.i-num
						{
							display: flex;
							position: relative;
							align-items: center;
							justify-content: center;
							width: 100px;
							height: 24px;
							border-radius: 4px;
							border: 1px solid #E6E6E6;
							.num
							{
							}
							.reduce
							{
								border-right: 1px solid #EEE;
								position: absolute;
								width: 24px;
								height: 24px;
								text-align: center;
								line-height: 24px;
								background: #F8F8F8;
								left: 0;
								cursor: pointer;
							}
							.plus
							{
								border-left: 1px solid #EEE;
								position: absolute;
								right: 0;
								width: 24px;
								height: 24px;
								text-align: center;
								line-height: 24px;
								background: #3388FF;
								color: #FFF;
								cursor: pointer;
							}
						}
					}
				}
			}
			.item-r
			{
				width: 20px;
				height: 20px;
				cursor: pointer;
				image
				{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>